<template>
<!-- 右下box -->
  <herin-container class="Machine-monitoring" :delay="1" title="设备列车监测" direction="Right">
    <template #content>
      <div class="Machine-monitoring-box">
          <div class="electric-current" v-for="(go) in data" :key="go.i">
            <span class="electric-current-name"><img :src="go.navIcon" alt=""></span>
            <span class="electric-current-num">{{go.name}}</span>
          </div>
      </div>
    </template>
  </herin-container>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';

export default {
  components: {
    HerinContainer
  },
  data() {
    return {
      data: [
        { name: '1号乳化泵', navIcon: require('@/assets/img/dispath/green.png') },
        { name: '2号乳化泵', navIcon: require('@/assets/img/dispath/green.png') },
        { name: '3号乳化泵', navIcon: require('@/assets/img/dispath/green.png') },
        { name: '4号乳化泵', navIcon: require('@/assets/img/dispath/green.png') },
        { name: '5号乳化泵', navIcon: require('@/assets/img/dispath/green.png') },
        { name: '6号乳化泵', navIcon: require('@/assets/img/dispath/green.png') }
      ]
    };
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.Machine-monitoring{
  color: #D8D8D8;
  margin-bottom: .625rem;
  .Machine-monitoring-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 6.25rem;
    overflow: auto;
    .electric-current{
      width:9.375rem;
      height:2.8125rem;
      background: #fff;
      margin-bottom: .625rem;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: .25rem;
      display: flex;
      justify-content:space-around;
      align-items: center;
      .electric-current-name{
        img{
          width: 1.5625rem;
          height: 1.5625rem;
        }
      }
      .electric-current-num{
        color: #F8F8F8;}
    }
  }
}

</style>
